---
title: Formatters Reference
eleventyNavigation:
    key: formatters
    parent: use eslint
    title: Formatters Reference
    order: 7
edit_link: https://github.com/eslint/eslint/edit/main/templates/formatter-examples.md.ejs
---

ESLint comes with several built-in formatters to control the appearance of the linting results, and supports third-party formatters as well.

You can specify a formatter using the `--format` or `-f` flag in the CLI. For example, `--format json` uses the `json` formatter.

The built-in formatter options are:

<% Object.keys(formatterResults).forEach(formatterName => { -%>
* [<%= formatterName %>](#<%= formatterName %>)
<% }) -%>

## Example Source

Examples of each formatter were created from linting `fullOfProblems.js` using the `.eslintrc.json` configuration shown below.

`fullOfProblems.js`:

```js
function addOne(i) {
    if (i != NaN) {
        return i ++
    } else {
      return
    }
};
```

`.eslintrc.json`:

```json
{
    "extends": "eslint:recommended",
    "rules": {
        "consistent-return": 2,
        "indent"           : [1, 4],
        "no-else-return"   : 1,
        "semi"             : [1, "always"],
        "space-unary-ops"  : 2
    }
}
```

Tests the formatters with the CLI:

```shell
npx eslint --format <Add formatter here> fullOfProblems.js
```

## Built-In Formatter Options
<% Object.keys(formatterResults).forEach(formatterName => { -%>

### <%= formatterName %>

<%= formatterResults[formatterName].description %>
<% if (formatterName !== "html") { -%>
<%
    let codeFormat = "text";
    let output = formatterResults[formatterName].result;
    let outputNote = "Example output:";

    if (output.startsWith("\u003C?xml")) {
        codeFormat = "xml";
    }

    if (formatterName.includes("json")) {
        codeFormat = "json";
        output = JSON.stringify(JSON.parse(output), null, 4);
        outputNote = "Example output (formatted for easier reading):";
    }
%>
<%= outputNote %>

```<%= codeFormat %>
<%- output %>
```
<% } else {-%>

Example output:

<iframe src="html-formatter-example.html" width="100%" height="460px"></iframe>
<% } -%>
<% }) -%>
